<template>
    <div class="app-container">
        <!-- 表单区域 -->
        <el-form :inline="true" class="demo-form-inline" size="small">
            <el-form-item label="案例名称">
                <el-input v-model="form.caseName" placeholder="请输入案例名称"></el-input>
            </el-form-item>
            <el-form-item label="污染物/危化品">
                <el-input v-model="form.pollutant" placeholder="请输入污染物/危化品"></el-input>
            </el-form-item>
            <el-form-item label="污染类型">
                <el-select v-model="form.pollutionType" placeholder="请选择污染类型">
                    <el-option label="水污染" value="水污染"></el-option>
                    <el-option label="大气污染" value="大气污染"></el-option>
                    <el-option label="土壤污染" value="土壤污染"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="事发原因">
                <el-select v-model="form.cause" placeholder="请选择事发原因">
                    <el-option label="交通运输" value="交通运输"></el-option>
                    <el-option label="违法排污" value="违法排污"></el-option>
                    <el-option label="自然灾害" value="自然灾害"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
                <el-button @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 按钮组 -->
        <div style="margin-bottom: 20px;">
            <el-button type="primary" size="small" @click="onAdd">新增</el-button>
            <el-button type="danger" size="small" @click="onDelete">删除</el-button>
            <el-button type="warning" size="small" @click="onExport">导出</el-button>
        </div>

        <!-- 表格区域 -->
        <el-table :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="caseName" label="案例名称" ></el-table-column>
            <el-table-column prop="pollutant" label="污染物/危化品" width="180"></el-table-column>
            <el-table-column prop="pollutionType" label="污染类型" width="180"></el-table-column>
            <el-table-column prop="cause" label="事发原因" width="180"></el-table-column>
            <el-table-column prop="incidentTime" label="事发时间" width="180"></el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <!-- 新增弹窗 -->
        <el-dialog title="新增处置案例" :visible.sync="addDialogVisible" width="600px" @close="handleAddClose">
            <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="120px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="案例名称" prop="caseName">
                            <el-input v-model="addForm.caseName" placeholder="请输入案例名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="事发时间" prop="incidentTime">
                            <el-date-picker
                                v-model="addForm.incidentTime"
                                type="date"
                                placeholder="请选择事发时间"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="事发地点" prop="incidentLocation">
                            <el-input v-model="addForm.incidentLocation" placeholder="请输入事发地点"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="污染类型" prop="pollutionType">
                            <el-select v-model="addForm.pollutionType" placeholder="请选择污染类型" style="width: 100%;">
                                <el-option label="水污染" value="水污染"></el-option>
                                <el-option label="大气污染" value="大气污染"></el-option>
                                <el-option label="土壤污染" value="土壤污染"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="事发原因" prop="cause">
                            <el-select v-model="addForm.cause" placeholder="请选择事发原因" style="width: 100%;">
                                <el-option label="交通运输" value="交通运输"></el-option>
                                <el-option label="违法排污" value="违法排污"></el-option>
                                <el-option label="自然灾害" value="自然灾害"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="污染物/危化品" prop="pollutant">
                            <el-input v-model="addForm.pollutant" placeholder="请输入污染物/危化品"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :span="21">
                    <el-form-item label="案例文件" prop="signatureFile">
                        <el-upload
                        :action="uploadUrl"
                        :headers="uploadHeaders"
                        :file-list="signatureFileList"
                        :on-success="handleSignatureFileSuccess"
                        :on-remove="handleSignatureFileRemove"
                        :before-upload="beforeSignatureFileUpload"
                        accept=".png,.jpg,.jpeg"
                        >
                        <el-button size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">请上传大小不超过10MB格式为png/jpg/jpeg的文件</div>
                        </el-upload>
                    </el-form-item>
                </el-row>
                
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="description">
                            <el-input 
                                type="textarea" 
                                :rows="3" 
                                v-model="addForm.description" 
                                placeholder="请输入事件描述">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleAddClose">取 消</el-button>
                <el-button type="primary" @click="submitAddForm">确 定</el-button>
            </span>
        </el-dialog>       
        <!-- 详情弹窗 -->
        <el-dialog title="处置案例详情" :visible.sync="detailDialogVisible" width="600px">
            <el-form label-width="120px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="案例名称">
                            <span>{{ detailData.caseName }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="事发时间">
                            <span>{{ detailData.incidentTime }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="事发地点">
                            <span>{{ detailData.incidentLocation }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="污染类型">
                            <span>{{ detailData.pollutionType }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="事发原因">
                            <span>{{ detailData.cause }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="污染物/危化品">
                            <span>{{ detailData.pollutant }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <span>{{ detailData.description }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="detailDialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                caseName: '',
                pollutant: '',
                pollutionType: '',
                cause: ''
            },
            tableData:  [
                {
                    caseName: '云南昭通水富向家坝码头水域磷矿石货船断裂倾覆事故-云南省水富市向家坝库区货船断裂倾覆事故应急处置工作总结报告',
                    pollutant: '石油类',
                    pollutionType: '水污染',
                    cause: '交通运输',
                    incidentTime: '2021-07-23'
                },
                {
                    caseName: '云南省曲靖市富源县饮用水水源地铊超标事件',
                    pollutant: '铊',
                    pollutionType: '水污染',
                    cause: '违法排污',
                    incidentTime: '2021-02-09'
                },
                {
                    caseName: '陕西省榆林市靖边县长庆油田第四采油厂输油管线泄漏事故',
                    pollutant: '石油类',
                    pollutionType: '水污染',
                    cause: '安全生产',
                    incidentTime: '2020-08-28'
                }
            ],
            addDialogVisible: false,
            editDialogVisible: false,
            detailDialogVisible: false,
            editIndex: -1,
            addForm: {
                caseName: '',
                incidentTime: '',
                incidentLocation: '',
                pollutionType: '',
                cause: '',
                pollutant: '',
                description: '',
                measures: '',
                summary: ''
            },
            detailData: {},
            addRules: {
                caseName: [
                    { required: true, message: '请输入案例名称', trigger: 'blur' }
                ],
                incidentTime: [
                    { required: true, message: '请选择事发时间', trigger: 'change' }
                ],
                incidentLocation: [
                    { required: true, message: '请输入事发地点', trigger: 'blur' }
                ],
                pollutionType: [
                    { required: true, message: '请选择污染类型', trigger: 'change' }
                ],
                cause: [
                    { required: true, message: '请选择事发原因', trigger: 'change' }
                ],
                pollutant: [
                    { required: true, message: '请输入污染物/危化品', trigger: 'blur' }
                ]
            },
            // 文件上传相关
            uploadUrl: '/common/upload',
            uploadHeaders: {
                'Authorization': 'Bearer ' +''
            },
            // 文件列表
            signatureFileList: [],
            selectedData:[],
        };
    },
    methods: {
        // 图片文件上传前检查
        beforeSignatureFileUpload(file) {
            const isLt10M = file.size / 1024 / 1024 < 10;
            const isImage = ['image/png', 'image/jpeg', 'image/jpg'].includes(file.type);
            
            if (!isImage) {
                this.$message.error('只能上传PNG、JPG、JPEG格式的图片！');
                return false;
            }
            if (!isLt10M) {
                this.$message.error('上传图片大小不能超过10MB！');
                return false;
            }
            return true;
        },
        // 文件删除处理函数
        handleSignatureFileRemove(file, fileList) {
            this.form.signatureFile = '';
        },
        // 文件上传成功处理函数
        handleSignatureFileSuccess(response, file, fileList) {
            this.form.signatureFile = response.url;
        },
        onSearch() {
            // 搜索逻辑
        },
        onReset() {
            // 重置逻辑
            this.form = {
                caseName: '',
                pollutant: '',
                pollutionType: '',
                cause: ''
            };
        },
        onAdd() {
            let index = this.tableData.length;  
            this.handleEdit(index,{})
        },
        onEdit() {
            // 编辑逻辑
        },
        onDelete() {
            if(this.selectedData.length == 0){
                this.$message.error('请选择要删除的行！');
                return;
            }
            this.$confirm('此操作将永久删除该案例, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.selectedData.forEach(item => {
                    let index = this.tableData.findIndex(it=> it.caseName == item.caseName);
                    this.tableData.splice(index, 1);
                });
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
            })
        },
        onExport() {
            // 导出逻辑
        },
        handleSelectionChange(e){
            this.selectedData = [...e];

        },
        handleDetail(index, row) {
            this.detailData = Object.assign({}, row);
            this.detailDialogVisible = true;
        },
        handleEdit(index, row) {
            this.editIndex = index;
            this.addForm = {...{},...row}
            this.addDialogVisible = true;
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该案例, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.tableData.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleAddClose() {
            this.addDialogVisible = false;
            this.$refs.addForm.resetFields();
        },
        handleEditClose() {
            this.editDialogVisible = false;
            this.$refs.addForm.resetFields();
        },
        submitAddForm() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    // 添加新数据到表格
                    let isEdit = this.editIndex < this.tableData.length;
                    let row = {...this.addForm}
                    this.tableData.splice(this.editIndex, 1, row);
                    
                    // 关闭弹窗并重置表单
                    this.handleAddClose();
                    
                    // 显示成功消息
                    this.$message({
                        message:isEdit ?'修改成功': '新增成功',
                        type: 'success'
                    });
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        },
    }
};
</script>

<style scoped>
.el-form-item {
    margin-bottom: 15px;
}
</style>